<template>
  <div id='playlist'>
    <div class='title'>
      <h2>全部</h2>
      <!--   歌单分类下拉菜单   -->
      <el-popover
        placement='bottom'
        width='700'
        trigger='click'>
        <template>
          <ul>
            <li style='margin: 5px;display: flex;flex-flow: row nowrap' v-for='(category,index) in categories'
                :key='index'>
              <div style='font-size: 16px;width: 60px;'>{{ category }}</div>
              <div style='display: flex; flex-flow: wrap;width: 100%'>
                <a
                  @click='changeCategory(s.name)'
                  style='font-size: 12px;border-right: 1px solid #cccccc;padding: 3px 12px'
                  v-for='(s,sindex) in sub'
                  v-if='s.category == index'
                  :class='{"playlist-category-a-active":s.activity}'
                  :key='sindex'>{{ s.name }}
                </a>
              </div>

            </li>
          </ul>
        </template>
        <el-button slot='reference'>选择分类<i class='el-icon-arrow-down'></i></el-button>
      </el-popover>
      <el-button size='mini' type='primary' style='margin-left: 20px' v-if="cat !== '全部'" @click="changeCategory('全部')">
        全部分类
      </el-button>
    </div>
    <hr color='#C20C02'>

    <!--  歌单展示区  -->
    <div class='list'>
      <div v-for='item in playlists' :key='item.id'>
        <PlayCard :data='item' />
      </div>
    </div>

    <el-pagination
      background
      layout='prev, pager, next'
      :total='total'
      :current-page='pageNo'
      :page-size='limit'
      style='text-align: center'
      @current-change='handleCurrentChange'>
    </el-pagination>
  </div>
</template>

<script>
import PlayCard from '@/components/PlayCard'

export default {
  name: 'Playlist',
  components: { PlayCard },
  data() {
    return {
      categories: {},
      sub: [],
      pageNo: 1,
      limit: 35,
      cat: '全部',
      total: 0,
      playlists: [],
    }
  },
  mounted() {
    this.$API.getCatlist().then(res => {
      if (res.data.code === 200) {
        this.categories = res.data.categories
        this.sub = res.data.sub
      }
    })
    this.getPlaylist()
  },
  methods: {
    async getPlaylist() {
      const { cat, pageNo, limit } = this
      let result = await this.$API.playList({ cat, pageNo, limit })
      if (result.data.code === 200) {
        this.total = result.data.total
        this.playlists = result.data.playlists
      }
    },
    handleCurrentChange(curPage) {
      this.pageNo = curPage
      this.getPlaylist()
    },
    changeCategory(cat) {
      this.cat = cat
      this.getPlaylist()
      this.sub.forEach(item => {
        item.activity = false
        if (item.name == cat) {
          item.activity = true
        }
      })
    },
  },
}
</script>

<style scoped lang='less'>
#playlist {
  width: 1020px;
  background-color: #FFFFFF;
  color: #333333;
  margin: 0 auto;
  padding: 40px;
  border: 1px solid #cdcdcd;

  .title {
    margin-bottom: 10px;

    h2 {
      display: inline-block;
      margin-right: 30px
    }

  }

  .list {
    padding: 30px 0;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;

    div {
      flex: 20%;
      margin-bottom: 20px;
    }
  }
}
</style>

<style>
.playlist-category-a-active {
  color: #C20C0C;
}
</style>